<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>标题</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<link rel='stylesheet' href='../css/fyz.public.style.css' />
<script type='text/javascript' src='../js/jquery-1.8.3.min.js'></script>
<style type='text/css'>
body{background:#EEEEEE;}
</style>
</head>
<body>
<style type="text/css">
/*使用只需改变height:540px;*/
div.bannerBox{height:500px; margin-bottom:50px;}
/*更改ul.bannerBut的高度 调整底部li的下边距*/
ul.bannerBut{height:35px; text-align:center; z-index:12;}
ul.bannerBut li{width:10px; height:10px; margin-right:10px; display:inline-block; color:#fff; background:#fff; cursor:pointer;}
ul.bannerBut li.bannerButHover{background:blue;}
/*修改div.bannerLeftRight的top:230px;的值 调整左右按钮距离上面的高度*/
div.bannerLeftRight{width:100%; height:80px; position:absolute; top:230px;}
div.bannerLeftRightBox{width:1200px; height:inherit; margin:0px auto; position:relative;}
div.bannerLeftRightBox span{display:block; display:none; width:45px; height:inherit; position:absolute; top:0px; z-index:20; cursor:pointer; background:#ccc; font-size:30px; text-align:center; line-height:80px; color:#fff; }
div.bannerLeftRightBox span.butRight{right:0px;}
div.bannerLeftRightBox span.butLeft{left:0px;}
</style>
<div class="bannerBox">
    <ul class="bannerChange">
        <li class='con' style="background:red;"></li>
        <li class='con' style="background:orange;"></li>
        <li class='con' style="background:yellow;"></li>
		<li class='con' style="background:green;"></li>
        <li class='con' style="background:cyan;"></li>
        <li class='con' style="background:blue;"></li>
    </ul>
    <ul class='bannerBut'></ul>
    <div class="bannerLeftRight">
        <div class="bannerLeftRightBox">
            <span class="butRight">&gt;</span>
            <span class="butLeft">&lt;</span>
        </div>
    </div>
</div>
<script type="text/javascript">
(function($){
    $.fn.extend({
        'bannerChange':function(options){
			var opts = $.extend({},bannerChange_Defaluts,options);
			var $this = $(this);
			var $thisAll = $this.parent().find('*');
			/**/
			$(this).parent('div.bannerBox').css({
				'width':'100%',
				'position':'relative',
			});
			$this.css({
				'width':'100%',
				'height':'inherit',
				'position':'relative',
			});
			$this.find('li.con').css({
				'width':'100%',
				'height':'inherit',
				'display':'none',
				'position':'absolute',
				'top':'0px',
				'left':'0px',
				'z-index':'10'
			});
			$(this).siblings('ul.bannerBut').css({
				'width':'100%',
				'position':'absolute',
				'left':'0px',
				'bottom':'0px',
			});
			/**/
			opts.liSize = $this.find('li.con').size();
			$this.find('li.con:first').show();
			for(var i=0; i<opts.liSize; i++){opts.Str += '<li></li>';};
			$(opts.ulBannerBut).html(opts.Str);
			$(opts.ulBannerBut).find('li').eq(0).addClass(opts.bannerButHover);
			$(opts.ulBannerBut).find('li').live('click',function(){
				opts.index = $(this).index();
				partCom();
			});			
			function partCom(){
				$(opts.ulBannerBut).find('li').eq(opts.index).addClass(opts.bannerButHover).siblings('li').removeClass(opts.bannerButHover);
				$this.find('li.con').eq(opts.index).fadeIn(2000).siblings('li').fadeOut(2000);
			};
			if(opts.autoPlay){
				function autoPlay(){
					clearInterval(opts.timer);
					opts.timer = setInterval(function(){
						opts.index++;
						opts.index = opts.index%opts.liSize;
						partCom();
					},opts.setInterValTime);
				};
				autoPlay();
				function clearIntervalFun(clearIntervalObj){
					$(clearIntervalObj).bind('mouseover',function(){clearInterval(opts.timer);});
					$(clearIntervalObj).bind('mouseout',function(){autoPlay();});
				};
				clearIntervalFun($this);
				clearIntervalFun($thisAll);
			};
			if(opts.ifLeftRightClick){
				$(opts.butRight).show();
				$(opts.butLeft).show();
				$(opts.butRight).bind('click',function(){
					opts.index++;
					opts.index = opts.index%opts.liSize;
					partCom();
				});
				$(opts.butLeft).bind('click',function(){
					opts.index--;
					if(opts.index == -1){opts.index = opts.liSize-1};
					partCom();
				});
			};
		}
    });
	var bannerChange_Defaluts = {
		autoPlay:true,
		liSize:'',
		index:0,
		Str:'',
		timer:null,
		fadeInTime:'2000',
		fadeOutTime:'1000',
		setInterValTime:'3000',
		ulBannerBut:'ul.bannerBut',
		bannerButHover:'bannerButHover',
		ifLeftRightClick:true,
		butRight:'span.butRight',
		butLeft:'span.butLeft',
	};
}(window.jQuery));
$("ul.bannerChange").bannerChange({
	fadeInTime:'2000',
	fadeOutTime:'1000',
	setInterValTime:'3000',
	autoPlay:true,//默认true
	ifLeftRightClick:true,//默认true
	butRight:'span.butRight',//左按钮
	butLeft:'span.butLeft',//右按钮
});
</script>

</body>
</html>